import React from 'react'
import Taro from '@tarojs/taro'
import './index.less'
import http from '../../../utils/http'

import Directory from './directory/index'
import Exam from './exam/index'
import Intro from './intro/index'

import { View, Video } from "@tarojs/components";
import { AtNavBar, AtTabs, AtTabsPane, AtIcon } from 'taro-ui'



class Train extends React.Component {

  constructor() {
    super(...arguments)
    this.state = {
      projectDetailData: {},
      current: 0,
      videoUrl: '',
      imgUrl: '',
      title: ''
    }
  }

  /* 返回 */
  handleClick = () => {
    Taro.navigateBack()
  }
  /* 获取项目详细数据 */
  getProjectDetail = async () => {
    const { id } = Taro.getCurrentInstance().router.params
    const { data: res } = await http({
      url: '/implement/getProjectDetail',
      data: { id }
    })
    if (res.error !== 0) return
    const newInfo = res.data
    newInfo.end_time = newInfo.end_time.split('T')[0]
    this.setState({ projectDetailData: newInfo })
  }
  /* tab选项卡切换 */
  currentChange = (value) => {
    this.setState({
      current: value
    })
  }
  /* 获取视频的信息 */
  getUrl = (videoUrl, imgUrl, title) => {
    this.setState({ videoUrl, imgUrl, title })
  }

  /* 挂载时 */
  componentDidMount() {
    /* 获取项目详细数据 */
    this.getProjectDetail()
  }

  render() {
    const tabList = [{ title: '目录' }, { title: '简介' }, { title: '考试' }]
    return (
      <View className='train_box'>
        <AtNavBar
          onClickLeftIcon={this.handleClick}
          color='#000'
          title={this.state.projectDetailData.title}
          leftIconType='chevron-left'
        />
        {/* 视频播放器 */}
        <View className='video_box'>
          {
            this.state.videoUrl ? (
              <Video
                id='video'
                title={this.title}
                src={this.state.videoUrl}
                poster={this.state.imgUrl}
                initialTime='0'
                controls
                showMuteBtn
                enablePlayGesture
              />
            ) : <View className='video_text'>请选择大纲中的课程进行学习</View>
          }
        </View>
        {/* tab选项 */}
        <AtTabs
          className='tab'
          current={this.state.current}
          tabList={tabList}
          onClick={this.currentChange}
        >
          <AtTabsPane current={this.state.current} index={0} >
            <Directory videoUrl={this.getUrl} />
          </AtTabsPane >
          <AtTabsPane current={this.state.current} index={1}>
            <Intro projectDetailData={this.state.projectDetailData} />
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={2}>
            <Exam projectDetailData={this.state.projectDetailData} />
          </AtTabsPane>
        </AtTabs >
      </View >
    )
  }
}

export default Train